<template>
  <view class="container">
    <!-- 头部欢迎区域 -->
	
	<view class="flex-y-center flex-x-center flex-direction-column header">
			<view class="">
				<image src="/static/image/header.png" class="w-64 h-64 radius-p50 "></image>
			</view>
			<view class="flex-x-center flex-y-center flex-direction-column position-relative">
				<view @click="toLogin" v-if="!isLogin" class="pt-10">未注册/登录</view> 
				<view class="flex-x-center flex-y-center flex-direction-column" v-else>
					<view class="fs-16 fw-500 pt-4">你好 {{dataString.userName}}</view>
					<view class="fs-12 cl-999999 pt-10">{{dataString.mobile}} 欢迎使用~</view>
				</view>
			</view>
		</view>
    <!-- 主要内容区域 -->
    <scroll-view class="main-content" scroll-y>
      <!-- 今日预约板块 -->
      <view class="card">
        <view class="section-title">
          <text>我的今日预约</text>
        </view>
        <view class="empty-state">
          <text>您今天没有预约哦~</text>
        </view>
      </view>

      <!-- 所有预约入口 -->
      <view class="card clickable" @click="navigateTo('/pages/indexOther/list')">
        <view class="section-title">
          <text>我的所有预约</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <!-- 个人资料入口 -->
      <view class="card clickable" @click="navigateTo('/pages/indexOther/info')">
        <view class="section-title">
          <text>关于我们</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>

     <!-- 其他功能模块
      <view class="card">
        <view class="section-title">
          <text></text>
        </view>
      </view -->

      <!-- 订阅通知 -->
<!--      <view class="card clickable" @click="handleSubscribe">
        <view class="section-title">
          <text>订阅新版本更新通知</text>
          <switch :checked="isSubscribed" @change="toggleSubscribe" />
        </view>
      </view> -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isSubscribed: false,
	  code:'',
	  dataJson:{
		  name:'',
		  userName:'',
		  mobile:'',
		  password:'12345',
		  sex:'',
	  },
	  isLogin:false,
	  phone:'',
	  dataString:{}
    }
  },
  onLoad() {
	 let mobile = Boolean(uni.getStorageSync('phone'))
	 this.phone = uni.getStorageSync('phone')
	 if(mobile){
		 this.init()
	 }else{
		 this.isLogin=false
	 }
  	
  },
  methods: {
	  toLogin(){
		  uni.navigateTo({
		    url: '/pages/index/login'
		  })
	  },
	  init(){
		  this.$rqt.getPerson({
			  mobile:this.phone
		  }).then((res) => {
		  	if (res.code == 200) {
				this.isLogin=true
		  		this.dataString= res.data
				uni.setStorageSync('pId', res.data.id)
		  	}
		  	uni.hideLoading()
		  })
	  },
	  // loginPerson
    handleRegister() {
      uni.navigateTo({
        url: '/pages/auth/register'
      })
    },
    navigateTo(path) {
      uni.navigateTo({
        url: path
      })
    },
    toggleSubscribe(e) {
      this.isSubscribed = e.detail.value
      uni.showToast({
        title: this.isSubscribed ? '订阅成功' : '已取消订阅',
        icon: 'none'
      })
    },
    tryAdminPanel() {
      uni.showModal({
        title: '试用提示',
        content: '即将进入后台管理系统试用版',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/admin/dashboard'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}
.btn-login{
	
}
.header {
  padding: 40rpx 30rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;

  .welcome-text {
    font-size: 36rpx;
    color: #333;
    display: block;
    margin-bottom: 20rpx;
  }

  .register-tip {
    color: #007AFF;
    font-size: 28rpx;
  }
}

.card {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;

  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    color: #333;
    padding-bottom: 20rpx;
    // border-bottom: 1rpx solid #eee;
  }

  .empty-state {
    padding: 40rpx 0;
    text-align: center;
    color: #999;
    font-size: 28rpx;
  }
}

.clickable {
  transition: all 0.3s;
  &:active {
    background-color: #f8f8f8;
    transform: scale(0.98);
  }
}

.admin-entry {
  position: fixed;
  bottom: 40rpx;
  left: 20rpx;
  right: 20rpx;

  .admin-btn {
    background: linear-gradient(45deg, #409eff, #337ecc);
    color: white;
    border-radius: 50rpx;
    font-size: 32rpx;
  }
}
</style>